import React,{useEffect,useState} from 'react'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    AntDesignOutlined
} from '@ant-design/icons';
import { Layout, theme, Dropdown, Space, Avatar,Image } from 'antd';
import { connect, NavLink, useNavigate } from 'umi';

const { Header } = Layout;
function StandBoxHeader(props: any) {
    const { collapsed, dispatch,currentUserList } = props;
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const navigate=useNavigate();
    // 记录当前用户的信息
    const [currentUserData,setCurrentUserData]=useState(null)
    useEffect(()=>{
        if(currentUserList.length<=0){
            if(localStorage.getItem('token')){
                setCurrentUserData(JSON.parse((localStorage.getItem('token')as string))[0])
            }
            else{
                navigate('/login')
            }
        }
        else{
            setCurrentUserData(currentUserList[0])
        }
        
    },[currentUserList])
    
    // 退出按钮
    const logOut=()=>{
        localStorage.removeItem('token');
    };
    const items: any = [
        {
            key: '1',
            label: (
                <NavLink to={'/login'}>
                    {(currentUserData as any)?.role?.roleName}
                </NavLink>
            ),
        },
        {
            key: '2',
            danger: true,
            label: (
                <NavLink to={'/login'} onClick={logOut}>
                    退出
                </NavLink>
            ),
        },
    ];

    return (
        <Header style={{ padding: 0, background: colorBgContainer }}>
            {collapsed ? <MenuUnfoldOutlined className='trigger' onClick={() => {
                dispatch({
                    // 命名空间（namespace）/reducers属性方法名 
                    type: 'StandBox/flexSider',
                    payload: {
                        // 显示Sider菜单
                        isCollapsed: false
                    }
                })
            }}></MenuUnfoldOutlined> :
                <MenuFoldOutlined className='trigger' onClick={() => {
                    dispatch({
                        // 命名空间（namespace）/reducers属性方法名 
                        type: 'StandBox/flexSider',
                        payload: {
                            // 隐藏Sider菜单
                            isCollapsed: true
                        }
                    })
                }}></MenuFoldOutlined>}
            <div style={{ float: 'right', marginRight: '10px',lineHeight:'100%' }}>
                <span style={{ marginRight: '10px'}}>欢迎 <span style={{'color':'#abf'}}>{(currentUserData as any)?.username} </span> 回来</span>
                <Dropdown menu={{ items }}>
                    <a onClick={(e) => e.preventDefault()}>
                        <Space>
                            <Avatar
                                size={{ xs: 24, sm: 32, md: 40, lg: 45, xl: 50, xxl: 100 }}
                                src={<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F19%2F20210219223710_b5d3b.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674564364&t=f94bd0a0c6ba2eb12196fc2055776934"></Image>}
                            />
                        </Space>
                    </a>
                </Dropdown>
            </div>
        </Header>
    )
}
const mapStateToProps = (state: any) => {
    return {
        collapsed: state.StandBox.collapsed,
        currentUserList:state.StandBox.currentUserList
    }
}
export default connect(mapStateToProps)(StandBoxHeader)